<!DOCTYPE html>     <!--声明版本-->
<html lang="en">    <!--标注语言-->
<head>      <!--头部-->
    <meta charset="UTF-8">      <!--编码格式-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!---->
    <title>html5各标签示例</title>      <!--网页标题-->
    <!--下面这个是网页格式初始化，会去掉浏览器自己的格式-->
    <style>
        * { 
            margin: 3px; 
            padding: 0px; 
        }
    </style>

    <!--加入css元素（这里用kink元素）-->
    <link rel="stylesheet" href="demo.css">
</head>
<body>      <!--内容部分-->
    <div>       <!--div是块元素，可以有很多个块，也可以内嵌块-->
        <h2>一、这是展示标题和段落样式</h2>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6><br>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3            <!--"&nbsp;"每一个是一个空格-->
            <span>文本&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;内嵌元素1</span>
            <span>文本内嵌元素2</span>
            <span>文本内嵌元素3</span>
        </p><br>
        <pre>   <!--pre标签可以直接换行和空格，而且文本显示位置也一样-->
            此例演示如何使用 pre 标签
    对空行和       空格
进行控制
        </pre>
    </div>
    <div>
        <h2>二、这里展示链接、图片和列表</h2><br>   <!--br是换行-->
        <!--a是链接标签，href是网址，target是打开方式（默认是_self本窗口打开，_blank是新窗口打开）-->
        <h6>下面是一个百度链接</h6>
        <a href="http://www.baidu.com" target="_blank">这是一个百度链接</a>
        <pre>
            
        </pre>

        <!-- img是图片标签，其中src是图片地址，alt是打开图片失败的文本，width是宽度，title是鼠标停留在图片上的文本显示 -->
        <h6>下面是一个图片显示</h6>
        <img src="C:\Users\80985\Desktop\pychram快捷键.jpg" alt="这是pychram的快捷键图片" width="500" title="pythram">
        <pre>

        </pre>

        <!-- ul是无序列表，li是列表项。可以在ul标签上使用type属性定义图形符号的样式，<br/>
        当属性值为disc时显示为点，为square时显示为方块，为circle时显示为圆，为none时不显示<br/>
        示例：-->
        <h6>下面是无序列表</h6>
        <ul type="circle">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul><br>

        <!-- ol是有序列表，li是定义列表项，有序列表的每一项有顺序含义。有序列表的前缀通常为数字或者是字母。
        ol也可以有type属性（1，a，A等）
        示例： -->
        <h6>下面是有序列表</h6>
        <ol type="a">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol><br>

        <!-- dl是自定义列表，内部可以有多个列表项，每个列表项用dt定义标题，用dd定义列表项。
        dl标签定义了自定义列表（definition list）
        dl标签用于结合dt（定义列表中的项目）和dd（描述列表中的项目）
        示例： -->
        <h6>下面是自定义列表</h6>
        <dl>
            <dt>列表标题</dt>
            <dd>列表项目1</dd><dd>列表项目2</dd><dd>列表项目3</dd>
            <br>
            <dt>列表标题2</dt>
            <dd>列表2项目1</dd><dd>列表2项目2</dd><dd>列表2项目3</dd>
        </dl>
    </div>
    <div>
        <h2>三、这里展示表格结构</h2>
        <div>
            <!--表格标签
            表格用table定义，里面由若干行和列的单元格组成。
            在表格元素中，使用tr表示表格中的一行，使用td表示列。
            表格可以定义标题，用caption标签定义。
            示例3x3的表格：-->
            <table border="2" width="200" height="100">      <!--border是外边框,width是宽，height是高（只作用于内容，头部和底部不变）-->
                <colgroup>      <!--定义一组表格的每列颜色,空格表示无色-->
                    <col bgcolor="red">     <!--col定义列的颜色，第1列-->
                    <col bgcolor="blue">     <!--col定义列的颜色，第2列-->
                    <col bgcolor="yellow">     <!--col定义列的颜色，第3列-->
                </colgroup>
                
                <caption>这个是单行展示</caption>     <!--表格的标题-->
                <tr>
                    <th>数字</th>       <!--td改成th字体会加粗，默认在表格中间位置-->
                    <th>字母</th>
                    <td>符号</td>
                </tr>
            </table>
        </div>
        <br>

        <div>
            <!--可以使用<thead><tbody><tfoor>三个标签分别定义表格的头部、主体、底部。
            示例-->
            <table border="2" width="200" height="100">
                <caption>下面是定义三个部分</caption>
                <thead><tr><td>头部</td></tr></thead>
                <tbody><tr><td>主体</td></tr></tbody>
                <tfoot><tr><td>底部</td></tr></tfoot>
            </table>
        </div>
        <br/>
        <div>
            <!--成品表格示例：-->
            <table border="5" width="200" height="100">
                <colgroup span="3" width="200">      <!--定义一组表格的每列颜色,空格表示无色，span是表示设置多少个列-->
                    <col bgcolor="">     <!--col定义列的颜色，第1列-->
                    <col bgcolor="green">     <!--col定义列的颜色，第2列-->
                    <col bgcolor="yellow">     <!--col定义列的颜色，第3列-->
                </colgroup>
                <caption>这个是表格展示</caption>
                <thead>     <!--头部，只能用一次-->
                    <tr>
                    <th>数字</th>
                    <th>字母</th>
                    <th>符号</th>
                </tr>
                </thead>
                <tbody>     <!--内容，可以重复用-->
                    <tr>
                    <td>1</td>
                    <td>a</td>
                    <td>!</td>
                </tr>
                
                </tbody>
                <tfoot>     <!--底部，只能用一次-->
                    <tr>
                    <td>2</td>
                    <td>b</td>
                    <td>%</td>
                </tr>
                </tfoot>
            </table>
        </div>

        <div>
            <!--表格排版
                align是左右位置，默认靠左，center是中间，right靠右。
                valign是上下位置，默认中间，top是上面，bottom是下面。
                bgcolor是颜色，可以用在colgroup列里，也可以用在tr行里。
                用在table里面是表格在网页的位置，用还tr是整行的位置 ，用在td是字体在表格的位置-->
            <table align="center" border="1" cellspacing="0" cellpadding="10">     <!--cellspacing是设置每格之间的距离，cellpadding是设置单元格的内边距。-->
                <colgroup span="3" width="200">     <!--span是表示设置多少个列-->
                    <col bgcolor="red">     <!--col定义列的颜色，第1列-->
                </colgroup>      
    
                <caption>这个是跨行和跨列展示</caption>
                <!--td有两个常用的 属性，colspan用于定义单元格跨行，rowspan用于跨列。只能用于主体，不能用于头部和底部！
                align用于字体的左右位置，默认靠左，center是中间，right靠右。valign是上下位置，默认中间，top是上面，bottom是下面-->
    
                <tr bgcolor="green" align="center">
                    <td colspan="2" align="center">1.1</td>        <!--行合并，需要把合并的行格删除（1.2）-->
                    <!-- <td>1.2</td> -->
                    <td><img src="C:\Users\80985\Desktop\pychram快捷键.jpg" alt="这是pychram的快捷键" width="50" title="pythram"></td>     <!--表格内容可以是图片-->
                    <td>1.4</td>
                    <td rowspan="5">1.5</td>        <!--列合并，需要把合并的列格删除（1.5-5.5）-->
                </tr>
                <tr align="center">
                    <td rowspan="2" valign="top">2.1</td>    <!--列合并，需要把合并的列格删除（3.1）-->
                    <td>2.2</td>
                    <td>2.3</td>
                    <td>2.4</td>
                    <!-- <td>2.5</td> -->
                </tr>
                <tr bgxolor="yellow" align="center">       <!--这个没起作用-->
                    <!-- <td>3.1</td> -->
                    <td>3.2</td>
                    <td>3.3</td>
                    <td>3.4</td>
                    <!-- <td>3.5</td> -->
                </tr>
                <tr align="center">
                    <td colspan="4">4.1</td>        <!--行合并，需要把合并的行格删除（4.2-4.4）-->
                    <!-- <td>4.2</td>
                    <td>4.3</td>
                    <td>4.4</td> -->
                    <!-- <td>4.5</td> -->
                </tr>
                <tr align="center">
                    <td>5.1</td>
                    <td>5.2</td>
                    <td>5.3</td>
                    <td>5.4</td>
                    <!-- <td>5.5</td> -->
                </tr>
            </table>
        </div>
    </div>
    <br>
    <div> 
        <h2>四、这里是数据交互（表单元素）</h2><br>
        <!--使用form标签定义表单，表单有两个最重要的属性action和method。
            action属性定义了表单提交的地址，method属性定义了表单提交的方式。
            表单提交有两种方式，一种是get，另一种是post。
            其它的表单控件元素必须放在form标签的内部。
        例如-->
        <div>
            <h3>1、input元素（输入和提交）</h3>
            <form action="http://www.huawei.com" method="POST">
                <div>下面是输入框</div>
                <!--input是一个单标签元素，其属性type代表了input的表单类型，input标签就是通过type属性的不同取值来定义不同的表单控件。-->
                <div>
                    <!--单文本框text：可以输入一行文本的表单控件，value是输入的值。-->
                    <input type="text" value="" />
                    
                    <!--单选按钮radio：具有相同name属性的单选按钮只能选择一个。
                        label是把选项的文本也可以点击，用for和id来建立联系。-->
                    <div>
                        <input type="radio" name="photo" id="p1" value="值1" /><label for="p1">P40手机</label>
                        <input type="radio" name="phtot" id="q" value="值2" /><label for="q">荣耀20</label>
                    </div>
    
                    <!--多选按钮checkbox：可以选择多个的选择框。文本选择同上-->
                    <input type="checkbox" name="name" value="值3" />
    
                    <!--普通按钮button-->
                    <input type="text" />
    
                    <!--提交按钮submit：会触发将表单数据提交到服务器的功能-->
                    <input type="submit" value="提交" />
    
                    <!--重置按钮reset：会清除表单中的所有数据，恢复表单中的原始值-->
                    <input type="reset" value="重置" />
    
                    <!--文件上传按钮file：用于文件上传-->
                    <input type="file" value="" />
    
                    <!--用户名输入，name值是user-->
                    <div>用户名：<input type="text" name="user" /></div>
                    
                    <!--密码输入password：用于密码输入，name值是pwd-->
                    <div>密码：<input type="password" name="pwd" /></div>
                </div>
            </form>
        </div>
        <br>

        <div>
            <b>下面是完整的例子</b>
            <form action="http://www.huawei.com" method="GET">
                <div>购买手机</div>
                <div>用户名：<input type="text" name="user" /></div>
                <div>密码：<input type="password" name="pwd" /></div>
                <div>手机：
                    <input type="radio" name="photo" id="p2" value="p40" /><label for="p2">P40手机</label>
                    <input type="radio" name="photo" id="m" value="m40" /><label for="m">mate40手机</label>
                </div>
                <div>配件：
                    <input type="checkbox" name="配件" id="w" value="1" /><label for="w">无线耳机</label>
                    <input type="checkbox" name="配件" id="c" value="2" /><label for="c">充电宝</label>
                </div>
                <div>
                    <input type="submit" value="提交" />
                    <input type="reset" value="重置" />
                </div>
            </form>
        </div>
        <br>

        <div>
            <h3>2、下拉列表元素</h3><br>
            <!--select用来定义列表，option用来定义列表项
                select用name属性，option用value属性，option里面加入selected选项是默认
                select里面加入size是设置显示几个选项，多的选项可以滚动，multiple可以设置成多选
                
            示例-->
            <div>多选择项</div>
            <select name="course" id="001" size="2" multiple>
                <option value="Math">数学</option>
                <option value="Chinese" selected>语文</option>      <!--默认语文-->
                <option value="English">英语</option>
            </select>
            <pre>

            </pre>

            <div>单选择项</div>
            <select name="cours" id="002">
                <option value="Math">数学</option>
                <option value="Chinese">语文</option>      <!--默认语文-->
                <option value="English">英语</option>
            </select>

            
            
        </div>
        <br>

        <div>
            <h3>3、多行文本域</h3>
            <!--textarea用来表示多行文本域
                rows是行，cols是列，在浏览器可以手动扩大缩小
            示例-->
            <textarea name="text" id="t1" cols="30" rows="10"></textarea>
        </div>
    </div><br><br>

    <div>
        <h2>五、这里是CSS</h2>      <!--大部分css操作都转入demo文件里面-->
        
        <div>
            <h3>1、CSS的4种应用方式</h3>
                <p>1、内联样式：将css样式直接写到HTML元素的style属性中</p>
                <p>2、内部样式：将css样式写到style标签中</p>
                <p>3、引入外部样式：精确通过link元素引入外部的一个css文件</p>
                <p>4、导入外部样式：通过在style元素中，使用@import导入一个外部的css文件</p>
            
            <br>
            <p>示例：</p>
            <!--第1种：标题直接加入style元素-->
            <h4 style="color: gold;">华为手机发布会</h4><br>
        
            <!--每2-4种在head头部里面加入-->
            <!--第2种：<style>标签添加在head头部里
                type属性表示style标签里面引入的css代码（可不加）-->
            <!-- <style type="text/css">
                h2 {
                    color: chartreuse;
                }
            </style> -->
            
            <!--第3种：link元素也在head里面(有2个重要的属性，同样type属性同第2种，可加可不加)，单标签关闭
                rel声明引入外部的表单，href是外部表单的地址。-->
            <!-- <link rel="stylesheet" href="demo.css" /> -->
        
            <!--第4种：引入外部css文件，引入后后面代码会变白-->
            <!-- <style>
                @import 'demo.css'
            </style> -->
        </div>
        
        <div>
            <h3>2、css的基本语法</h3>
            <p>css的基本语法:一个基本结构，三个注意事项</p>
            <p>* 选择器{样式名:样式值;}</p>
            <p>1.分号分割样式</p>
            <p>2.小写</p>
            <p>3.用逗号进行分割选择器</p>
            <br>
            
            <b>小例子</b>
            <ul>
                <!--corlor是颜色，font-size是字体大小-->
                <li>h1 {color: red; font-size: 30px; }</li>
                <!--#twxt是id选择器，font-weight是字体的粗细程度，text-indent是控制方案的缩进-->
                <li>#text { font-weight: bold; text-indent: 2em; }</li>
                <!--box1，2，3分为一组设置-->
                <li>.box1, box2, box3 {height: 100px; background: yellow; }</li>
            </ul>
        
            <!--下面css样式同样可用于第2到4种用法里面，style写在head头部里面！同属性的代码只有最后一个生效。
                corlo是颜色，
                text-align是显示位置，
                text-shadow是阴影：第1个px是控制阴影在x轴上的偏移量，第2个是竖直方向的偏移量，第3个是扩散的半径，最后是颜色。
                background是背景色
            
                p标签设置样式后，里面的spen标签继承了同样的设置
            -->
            <br>

            <b>下面是示例展示</b>     <!--已添加到css文件-->
            <style>
                /* h2 {
                    text-shadow: 2px 2px 2px chartreuse; 
                    background: yellow;
                } */
                /*下面的代码是改变段落的样式和大小*/
                /* p {
                    color: royalblue;
                    font-size: 20px;
                } */
            </style>
        
            <h4>华为手机</h4>
            <h5>华为路由器</h5>
        </div><br>
        
        <div>
            <h3>3、css最重要的选择器</h3><br/>

            <h4>通配符选择器和元素选择器</h4><br>
            <div>
                <div>
                    <h6>通配符选择器</h6>
                    <!--通配符用在head头部里面-->
                    <ul>
                        <p>1、什么通配符选择器</p>
                        <li>css的通配符选择器是一种比较特殊的选择器，用“ * ”表示</li>
                        <li>格式：*{ property: value; ......</li>
                        <li>含义：可以选中页面中所有的元素，对所有元素生效</li>
                        <li>用途：一般用于设置一些初始化的公共属性</li>
                        <p>2、例如：</p>
                        <p>* { margin: 0px; padding: 0px; }</p>
                    </ul>
                </div><br>
    
                <div>
                    <h6>元素选择器</h6>
                    <ul>
                        <p>1.什么是元素选择器</p>
                        <li>使用某个HTML元素名作为选择器</li>
                        <li>是一种最简单的选择器</li>
                        <li>格式：E { property: value; ......</li>
                    </ul>
                    <p>2.标签选择器就是上面的css基础语法</p>
                </div><br>
            </div>

            <h4>id选择器和类选择器</h4><br>
            <div>
                <div>
                    <h6>id选择器</h6>
                    <ul>
                        <b>1.什么是id选择器</b>
                        <li>id是指我们可以在HTML标签上设置一个id属性</li>
                        <li>id属性的特点是一个HTML文档，只能有唯一的一个，不能重复</li>
                        <li>格式为：#id { property: value; ......</li>
                        <li>含义：可以选中页面中含有id属性值的元素</li>
                        <b>2.代码示例:</b>
                        <li><strong><</strong>div id="content">华为5G技术<strong><</strong>/div></li>
                    </ul>
    
                    <b>显示示例：</b>       <!--css文件33行-->
                    <p id="p1">我是用id来设置的1</p>
                    <p id="p2">我是用id来设置的2</p>
                    <br>
    
                </div><br>
                
                <div>
                    <h6>类选择器</h6>
                    <ul>
                        <b>1.什么是类选择器</b>
                        <li>格式为：.calss { property: value; ......</li>
                        <li>类选择器中的类指的是class属性</li>
                        <li>有相同class属性值的都会被选中</li>
                        <li>class与id相比不具有唯一性</li>
                        <li>class属性的值通常以字母开头中间不能有空格</li>
                        <li>类选择器可以和元素选择器组合使用</li>
                        <br>
                        <b>2.代码示例:</b>
                        <li><strong><</strong>div class="title">华为5G技术<strong><</strong>/div></li>
                    </ul>
                    <br>
        
                    <b>3.显示示例：</b>       <!--css文件38行-->
                    <!-- .p3 { font-size: 30px;}
                    p.p3 { color: greenyellow;}      p.p3是class的p标签-->
                    <div class="p3">我是用class来设置的1</div>
                    <div class="p3">我是用class来设置的2</div>
                    <div>我是用class来设置的3</div>
                    <div>我是用class来设置的4</div>
                    <div>我是用class来设置的5</div>
                    <p class="p3">我是用class来设置的6</p>
                </div><br>

            </div><br>

            <h4>属性选择器和伪类选择器</h4><br>
            <div>
                <h6>属性选择器</h6>
                <div>
                    <ul>
                        <b>1.什么是属性选择器</b>
                        <li>属性选择器是用于对具有某种属性的元素设置css样式</li>
                        <li>格式为：E[attribute] { property: value; ......</li>
                        <li>E代表元素，[]表示元素属性</li>
                        <br>
                        <b>2.属性的种类</b>
                        <li>[attribute]用于选取指定属性（attrinute）的元素</li>
                        <li>[attribute=value]用于选取指定属性（attrinute）和指定属性值（value）的元素</li>
                        <li>[attribute~=value]用于选取属性值中包含指定值的元素</li>
                        <li>[attribute|=value]用于选取以指定值开头的属性值的元素</li>
                    </ul><br>
                    <b>显示示例：</b>   <!--下面是属性选择器的4种展示-->
                    <p title="p40 m40">华为p40手机</p>      <!--css文件41行-->
                    <p title="w41 m40">华为p41手机</p>      <!--css文件42行-->
                    <p title="p40 m42">华为p42手机</p>      <!--css文件43行-->
                    <p title="p42-w42">华为p43手机</p>      <!--css文件42行-->
                    <p title="p42">华为p44手机</p>          <!--css文件42行-->
                </div><br>

                <h6>伪类选择器</h6>
                <div>
                    <ul>
                        <b>1.什么是伪类</b>
                        <li>伪类是指那些处在一定状态的元素</li>
                        <li>伪类以冒号开头</li><br>
                        <b>2.什么是伪类选择器</b>
                        <li>通过伪类来选中相应元素进而添加样式的选择器</li>
                        <li>含糊名可以单独使用，也可以和其它选择器一起使用</li>
                        <li>一般伪类选择器通常和元素名称一起使用，用于选中某一元素的伪类</li>
                        <li>元素选择符和冒号之间不能有空格</li>
                        <li>伪类选择器最喜欢和超链接（a元素一起使用）</li><br>

                        <b>3.伪类如下：</b>
                        <li>:link 表示未被访问的链接</li>
                        <li>:visited 表示已被访问的链接</li>
                        <li>:hover 鼠标经过链接上方时的状态</li>
                        <li>:active 链接被激活时的状态</li>
                        <li>这个顺序很重要！</li><br>
                        <b>4.例如：</b>     <!--css文件46行-->
                        <a href="https://huawei.com" id="hw">华为官网</a>
                        <a href="http://baidu.com">百度网页</a>
                    </ul>
                </div>
            </div><br>

            <h4>派生选择器</h4>
            <div>
                <ul>
                    <b>1.后代选择器</b>
                    <li>后代选择器主要是用来选择某个元素的后代元素</li>
                    <li>格式为：父元素 子元素 { property：value;......</li>
                    <li>注意点：父元素与子元素之间至少有一个空格，可以有很多空格</li><br>
                    <b>例如：</b>
                    <p>p span { color: red; }</p><br>
                    <b>显示示例：</b>
                    <div>华为云：<span>HCIA认证</span>程序</div>    <!--css文件52行-->
                    <p>华为云：<span>HCIP认证</span>程序</p>        <!--css文件53行-->
                </ul><br>

                <ul>
                    <b>2.子元素选择器</b>
                    <li>格式为：父元素 > 子元素 { property: value;......}</li>
                    <li>用来选择作为某一个元素子元素的元素</li>
                    <li>与后代选择器的区别是后代选择器选的是所有子元素，而子元素选择器只选第一级子元素</li><br>
                    <b>例如：</b>
                    <p>p > span { color: red;}</p><br>
                    <b>代码示例</b>
                    <p>华为云：<span>第一级1<span>第二级</span></span><span>第一级2</span></p>        <!--css文件54行-->
                </ul><br>

                <ul>
                    <b>3.相邻兄弟选择器</b>
                    <li>格式为：父元素 + 子元素 { property: value;......</li>
                    <li>用来选择紧跟在一个元素之后的兄弟元素</li>
                    <li>这两个相邻元素一定是同级元素</li><br>
                    <b>例如：</b>
                    <p>div + p { xolor: red; }</p><br>
                    <b>显示示例：</b>
                    <div>华为云：<span>HCIA认证</span>程序</div>
                    <p>华为云：     <!--css文件54行-->
                        <span>第一级1<span>第二级</span></span>
                        <span>第一级2</span>
                        <span>第一级3</span></p>        
                </ul>
            </div><br>

            <h4>选择器的权重</h4>
            <div>
                <ul>
                    <b>1.什么是选择器的权重</b>
                    <li>一个小例子引发的思考</li>
                    <li>再回味一下层叠样式表单的本质</li><br>
                    <b>2.权重规则</b>
                    <li>通配符选择器的权重：0</li>
                    <li>标签类选择器的权重：1</li>
                    <li>类、伪类、属性选择器的权重：10</li>
                    <li>id选择器 的权重：100</li>
                    <li>内联样式的权重：1000</li>
                    <li>特殊处理：!important（强制使用）</li><br>
                    <b>代码示例</b>     <!--css文件58到65行-->
                    <div id="id" class="hua">华为手机发布会现场</div>
                </ul>
            </div>
        </div>

        
    </div>
</body>
</html>